<template>
  <div class="tpl45-head">
    <section class="members_flash adjust_margin j-swipe" id="mySwipe">
      <ul class="clearfix">
        <!-- TODO 小程序端用swiper -->
        <wx-swiper class="my-swipe" :style="`height: ${imgadvWxH}`" :circular="true" indicator-color="#ebedf0" indicator-active-color="#FE5000" :autoplay="autoplay" :indicator-dots="showIndicators">
          <wx-swiper-item v-for="(item,index) in tplItemData.dataset_swipe" :key="index">
            <a @click="openLink(item.link)">
              <img :src="item.pic" alt="" @load="onImageLoad($event)"/>
            </a>
          </wx-swiper-item>
        </wx-swiper>

      </ul>
    </section>
    
    <section class="list_menu adjust_margin">
      <ul>
        <li
          v-for="(item, index) in tplItemData.dataset_btn" :key="index"
          v-if="tplItemData.dataset_btn">
          <a @click="openLink(item.link)">
            <img :src="item.pic" alt="">
            <p>{{ item.showtitle }}</p>
          </a>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { openPage } from '@/utils/utils'
  import { Swipe, SwipeItem } from 'vant'
  
  Vue.use(Swipe)
  Vue.use(SwipeItem)
  export default Vue.extend({
    name: 'index',
    props: {
      tplItemData: {
        type: Object
      }
    },
    data() {
      return {
        imgadvWxH: '0',
        showIndicators: true,
        autoplay: true,
        keyword: ''
      }
    },
    methods: {
      // TODO 小程序跳转
      openLink(link) {
        openPage(link)
      },
      // TODO 小程序swiper获取图片高度
      onImageLoad(event){
        const imgHeight=event.detail.height
        if(imgHeight>parseFloat(this.imgadvWxH)){
          this.imgadvWxH=imgHeight+'px'
        }
      },
      /**
       * 链接跳转
       */
      JumpName(url, data) {
        this.$JumpName(this, url, data)
      },
      searchList() {
        this.$JumpName(this, 'item-list', { title: this.keyword })
      },
      handleScroll() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量
        var ThisOpicty = scrollTop / 400
        var rgba = 'rgba(0,0,0,0)'
        if (scrollTop >= 200) {
          rgba = '#fe9d55'
        } else {
          rgba = `rgba(0,0,0,${ThisOpicty})`
        }
        if (document.getElementById('mob62')) document.getElementById('mob62').style.background = rgba
      }
    },
    mounted() {
      window.addEventListener('scroll', this.handleScroll) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll, false) // 移除监听
    }
  })
</script>

<style lang="scss">
  .tpl45-head{
    .list_menu{
      position: relative;
      margin-top: -5%;
      margin-bottom: 2%;
      padding: 3%;
      ul{
        display: flex;
        display:-webkit-box;
        display:-webkit-flex;
        flex-wrap: wrap;
        -webkit-flex-wrap:wrap;
        -moz-flex-wrap:wrap;
        flex-direction: row;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        background: #fff;
        // margin: 0 10px;
        padding: 2% 3%;
        border-radius: 20px;
        text-align: center;
        li{
          width: 16%;
          text-align: center;
          img{
            width: 106px;
            height: 106px;
          }
          p{
            line-height: 30px;
            padding-top: 10px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            color: #333;
            font-size: 22px;
          }
        }
      }
    }
    .members_flash{
      height: 100%;
      width: initial;
      .img{
        width: 100%;
      }
      .members_flash_time2{
        // bottom: 9%;
        &.in_pc{
          bottom: 11%;
        }
        span{
          background: #e2e2e2;
        }
        span.cur{
          width: 16px;
          background: #ff3c25;
        }
      }
    }
  }
</style>
